<template>
    <div class="contenter">
      <div class="banner">
        <img src="../../assets/twelve/banner.png" alt="">
      </div>
      <div class="selectedBox">
        <img class="imgR" src="../../assets/twelve/borang2.png" alt="">
        <img class="imgL" src="../../assets/twelve/borang3.png" alt="">
        <div  v-if="dataList" v-for="(v,i) in dataList" :key="i">
          <div v-if="i == 0" class="selected">
            <img src="../../assets/twelve/waike.png" alt="">
            <div class="goodsList">
              <div class="commodity" v-for="(v1,i1) in v.info" v-if="i1<=3" :key="i1" @click="routerTo(v,v1)">
                <img :src="v1.goods_image" style="width: 30.67vw;height:30.67vw;" alt="">
                <div class="commoBot">
                  ￥<span>{{v1.activity_price}}</span>
                  <img src="../../assets/twelve/36.png" alt="">
                </div>
              </div>
              <!--<div class="commodity">
                <img src="../assets/twelve/goods.png" alt="">
                <div class="commoBot">
                  ￥<span>299.00</span>
                  <img src="../assets/twelve/组 36.png" alt="">
                </div>
              </div>
              <div class="commodity">
                <img src="../assets/twelve/goods.png" alt="">
                <div class="commoBot"></div>
              </div>
              <div class="commodity">
                <img src="../assets/twelve/goods.png" alt="">
                <div class="commoBot"></div>
              </div>-->
            </div>
          </div>
          <div class="clear"></div>
          <div v-if="i == 1" class="twelveBoom"  style="top: -41vw;">
            <div class="topic">
              <img src="../../assets/twelve/boom.png" alt="">
            </div>
            <div class="bodys" v-for="(v1,i2) in v.info" v-if="i2<=2" :key="i2" @click="routerTo(v,v1)">
              <div class="content">
                <img class="twelve" src="../../assets/twelve/1212.png" alt="">
                <div class="insideTent">
                  <img :src="v1.goods_image" alt="">
                  <p class="goodsName">{{v1.goods_name}}</p>
                  <p class="yuanjia">原价：{{v1.price}}</p>
                  <p class="twelvePrice">双12价 ￥<span>{{v1.activity_price}}</span></p>
                  <button>抢购></button>
                </div>
              </div>
            </div>
          </div>
          <div v-if="i == 2" class="twelveBoom" style="margin-top: -34vw;padding-bottom: 4vw">
            <div class="topic">
              <img src="../../assets/twelve/1212title.png" alt="">
            </div>
            <div class="bodys moreGoods" v-for="(v1,i3) in v.info" :key="i3" @click="routerTo(v,v1)" style="background: #fff;border-radius: 2vw">
              <div class="content">
                <img class="twelve" src="../../assets/twelve/1212.png" style="top: -4.5vw;" alt="">
                <div class="insideTent">
                  <img :src="v1.goods_image" alt="">
                  <p class="goodsName" style="color: #333;">{{v1.goods_name}}</p>
                  <p class="yuanjia" style="color: #999">原价：{{v1.price}}</p>
                  <p class="twelvePrice" style="color: #ff0000">双12价 ￥<span style="color: #ff0000;">{{v1.activity_price}}</span></p>
                  <button>抢购></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
  import request from '../../request/index'
    export default {
        name: "doubleTwelve",
      data(){
          return{
            respon:[],
            dataList:[],
            type:1,
            join_id:0,
            limit_id:0,
            group_id:0,
            platform:this.$route.query.version,
            types:6,
          }
      },
      created(){
        request.doubleTwelve(this);
      },
      methods:{
        routerTo(v,v1){
          if (this._globe.isAndroid) {
            if (window.android != null && typeof window.android != "undefined") {
                window.android.openGoods(this.types,v1.goods_id,this.join_id,this.limit_id,this.group_id,v.id);
            }else {
              this.$router.push({
                path:'detail',
                query:{type:this.type,goods_id:v1.goods_id,join_id:this.join_id,limit_id:this.limit_id,
                  group_id:this.group_id,activity_id:v.id}
              })
            }
          }
          if (this._globe.isIos) {
            if (window.webkit) {
              window.webkit.messageHandlers.openGoods.postMessage
              ({type:this.types,goods_id:v1.goods_id,join_id:this.join_id,limit_id:this.limit_id,group_id:this.group_id,activity_id:v.id});
            }else {
              this.$router.push({
                path:'/detail?type='+this.types+'&goods_id='+v1.goods_id+'&join_id='+this.join_id+'&limit_id='+this.limit_id+
                  '&group_id='+this.group_id+'&activity_id='+v.id
                // query:{type:this.type,goods_id:g.goods_id,join_id:this.join_id,limit_id:this.limit_id,group_id:g.group_id}
              })
            }
          }
        }
      },
      mounted(){
          document.title="双十二专场"
      }
    }
</script>

<style scoped lang="scss">
  @media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    .contenter .selectedBox .selected .goodsList .commodity .commoBot img{
      top: -8.5vw;
    }
  }
  .contenter{
    width: 100vw;
    height: auto;
    background: #9908bf;
    .selectedBox{
      width: 100vw;
      height: auto;
      .imgR{
        width: 5vw;
        float: right;
        margin-top: 26vw;
      }
      .imgL{
        width: 5vw;
        float:left;
        margin-top: 88vw;
      }
      .twelveBoom{
        width: 88vw;
        height: auto;
        margin: 0px auto;
        position: relative;
        .moreGoods{
          margin-top: 4vw;
        }
        .bodys{
          width: 100%;
          height: 36.53vw;
          background-image: url("../../assets/twelve/redBottom.png");
          background-size: 100%;
          padding-top: 4vw;
          .content{
            width: 100%;
            height: 32vw;
            padding-top: 2.5vw;
            position: relative;
            top: .5vw;
            .twelve{
              width: 12vw;
              height: 9.3vw;
              top: 0;
              right: 4vw;
              position: absolute;
            }
            .insideTent{
              width: 92%;
              height: 92%;
              margin: 0px auto;
              button{
                width:12vw;
                height:5.6vw;
                background:rgba(102,0,238,1);
                border-radius:5px;
                position: absolute;
                font-size: 12px;
                color: #fff;
                right: 7vw;
                bottom: 4vw;
              }
              .twelvePrice{
                font-size: 10px;
                color: #f3f3f3;
                position: absolute;
                top: 23vw;
                left: 32vw;
                span{
                  font-size: 15px;
                  color: #fff;
                  margin-top: 1vw;
                  font-weight: bold;
                }
              }
              .yuanjia{
                margin-top: 6vw;
                color: #F3F3F3;
                text-decoration: line-through;
                font-size: 11px;
                float: left;
                text-indent: 2vw;
              }
              .goodsName{
                float: left;
                width: 39vw;
                font-size: 12px;
                color: #fff;
                margin-left: 2vw;
                height: 10vw;
                line-height: 5vw;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;

              }
              img{
                width: 26.67vw;
                height: 26.67vw;
                float: left;
                border-radius: 1.5vw;
              }
            }
          }
        }
          .topic{
            width: 50vw;
            height: auto;
            margin: 0px auto;
            margin-bottom: 3vw;
            /*animation: first 3s alternate infinite forwards;*/
          }
      }
      .selected{
        width: 88vw;
        height: 120vw;
        margin: 0px auto;
        position: relative;
        top: -11vw;
          .goodsList{
            width: 68vw;
            height: 82.67vw;
            margin: 0px auto;
            position: relative;
            top: -90vw;
            position: relative;
            .commodity{
              width: 30.67vw;
              height: 37.33vw;
              -webkit-border-radius: 1.5vw;
              -moz-border-radius: 1.5vw;
              border-radius: 1.5vw;
              overflow: hidden;
              .commoBot{
                width: 100%;
                height: 6.67vw;
                background: #ff4c46;
                margin-top: -1vw;
                font-size: 11px;
                color: #fff;
                text-indent: 2vw;
                  span{
                    font-size: 14px;
                  }
                  img{
                    width: 12vw;
                    float: right;
                    margin-top: -1vw;
                    position: relative;
                    top: -2.5vw;
                    right: 1vw;
                  }
              }
            }
            .commodity:nth-child(2){
              float: right;
            }
            .commodity:nth-child(1){
              float: left;
            }
            .commodity:nth-child(3){
              position: absolute;
              left: 0;
              bottom: 0;
            }
            .commodity:nth-child(4){
              position: absolute;
              right: 0;
              bottom: 0;
            }
          }
      }
    }
  }
.banner{
  width: 100vw;
  height: 90.4vw;
}
  @keyframes first {
    0%{
      transform: scale(1);
    }
    50%{
      transform: scale(1.1);
    }
    100%{
      transform: scale(0.9);
    }
  }
  @media screen and (min-width: 320px) and (max-width: 361px){
    .contenter .selectedBox .selected .goodsList .commodity .commoBot img{
      width: 11vw !important;
    }
  }
</style>
